<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CLEAN MARKUP = GOOD KARMA.
      Hi source code lover,

      you're a curious person and a fast learner ;)
      Let's make something beautiful together. Contribute on Github:
      https://github.com/webslides/webslides

      Thanks!
    -->

    <!-- SEO -->
    <title>Netflix's Culture &middot; WebSlides</title>
    <meta name="description" content="Patty McCord wrote the document called 'Netflix Culture: Freedom & Responsibility'.It's one of the most important documents ever to come out of Silicon Valley.">

    <!-- URL CANONICAL -->
    <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">

    <!-- CSS Base -->
    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">

    <!-- Optional - CSS SVG Icons (Font Awesome) -->
    <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">

    <!-- SOCIAL CARDS (ADD YOUR INFO) -->

    <!-- FACEBOOK -->
    <!-- EDIT -->
    <meta property="og:url" content="http://your-url.com/permalink">

    <!-- EDIT -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="WebSlides: Netflix's Culture" />
    <meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage.">

    <!-- EDIT -->
    <meta property="og:updated_time" content="2017-04-16T16:24:56">
    <!-- EDIT -->
    <meta property="og:image" content="../static/images/share-webslides.jpg" >
    <!-- EDIT -->
    <meta property="og:image:width" content="800">
    <meta property="og:image:height" content="429">

    <!-- TWITTER -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@webslides">

    <!-- EDIT -->
    <meta name="twitter:creator" content="@jlantunez">
    <!-- EDIT -->
    <meta name="twitter:title" content="WebSlides: Netflix's Culture">
    <!-- EDIT -->
    <meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage.">
    <!-- EDIT -->
    <meta name="twitter:image" content="../static/images/share-webslides.jpg">

    <!-- EDIT -->

    <!-- FAVICONS -->
    <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
    <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
    <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
    <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
    <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">

    <!-- Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#333333">
  </head>

  <body>
    <header role="banner">
      <nav role="navigation">
        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
        <ul>
          <li class="github">
            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
              <svg class="fa-github">
                <use xlink:href="#fa-github"></use>
              </svg>
              <em>WebSlides</em>
            </a>
          </li>
          <li class="twitter">
            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
              <svg class="fa-twitter">
                <use xlink:href="#fa-twitter"></use>
              </svg>
              <em>@WebSlides</em>
            </a>
          </li>
          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
        </ul>
      </nav>
    </header>

    <main role="main">
      <article id="webslides">

        <!-- Quick Guide
          - Each parent <section> in the <article id="webslides"> element is an individual slide.
          - Vertical sliding = <article id="webslides" class="vertical">
          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
        -->

        <section class="bg-red">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap aligncenter">
            <h1>
              <strong>Netflix's Culture</strong>
            </h1>
            <p class="text-symbols">* * * </p>
            <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free">
              <svg class="fa-cloud-download">
                <use xlink:href="#fa-cloud-download"></use>
              </svg> WebSlides</a>
            </p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap size-50 bg-white">
            <h2>
              <svg class="fa-info-circle large">
                <use xlink:href="#fa-info-circle"></use>
              </svg>
              <strong>A bit of context</strong>
            </h2>
            <hr>
            <p><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> created <a href="https://jobs.netflix.com/life-at-netflix">Netflix's culture</a>. She wrote the document called <strong>"Netflix Culture: Freedom & Responsibility."</strong> (2009). So far, it's been shared over 16 million times on <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap">
            <div class="grid vertical-align">
              <div class="column">
                <h3><strong>We seek excellence</strong></h3>
              </div>
              <div class="column">
                <p class="text-intro">We value candor, transparency, and courage. <strong>We embrace context and avoid control</strong>, seeking insight and understanding to make sound decisions.
                </p>
              </div>
            </div>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-red">
          <span class="background" style="background-image:url('https://source.unsplash.com/BYYu5nvQoUM/1600x800')"></span>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap aligncenter fadeInUp">
            <h3><strong>Diversity & Inclusiveness</strong></h3>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap size-50">
            <h2><strong>7 Aspects</strong> of our Culture</h2>
            <hr>
            <ol class="text-cols">
              <li><strong>Values are what we Value</strong></li>
              <li>High Performance</li>
              <li>Freedom & Responsibility</li>
              <li>Context, not Control</li>
              <li>Highly Alined, Loosely Coupled</li>
              <li>Pay Top of Market</li>
              <li>Promotions & Development</li>
            </ol>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap size-50 bg-white">
            <h3><strong>1/7 Values are what we value</strong></h3>
            <p class="text-intro">Make your values mean something.</p>
            <hr>
            <p>Many companies have nice sounding value statements displayed in the lobby. Enron, whose leaders went to jail, and which went <strong>bankrupt from <a href="https://www.youtube.com/watch?v=jrEf8uabe7E">fraud</a></strong> had these values displayed in their lobby: <strong>integrity, communication, respect, and excellence</strong>.</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap size-50">
            <h2><strong>9 Behaviors</strong></h2>
            <p class="text-intro">At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.</p>
            <hr>
            <ol class="text-cols">
              <li>Judgment</li>
              <li>Communication</li>
              <li>Impact</li>
              <li>Curiosity</li>
              <li>Innovation</li>
              <li>Courage</li>
              <li>Passion</li>
              <li>Honesty</li>
              <li>Selflessness</li>
            </ol>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap size-50">
            <h2><strong>7 Aspects</strong> of our Culture</h2>
            <hr>
            <ol class="text-cols">
              <li><strong>Values are what we Value</strong></li>
              <li><strong>High Performance</strong></li>
              <li>Freedom & Responsibility</li>
              <li>Context, not Control</li>
              <li>Highly Alined, Loosely Coupled</li>
              <li>Pay Top of Market</li>
              <li>Promotions & Development</li>
            </ol>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-black">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/8lUTnkZXZSA/1600x800')"></span>
          <div class="wrap">
            <h3><strong>2/7 High Performance</strong></h3>
            <ul class="flexblock features">
              <li>
                <div>
                  <h2>
                    <svg class="fa-users">
                      <use xlink:href="#fa-users"></use>
                    </svg>
                    We're a team
                  </h2>
                  not a family.
                </div>
              </li>
              <li>
                <div>
                  <h2>
                    <svg class="fa-trophy">
                      <use xlink:href="#fa-trophy"></use>
                    </svg>
                    We're a pro sports team
                  </h2>
                  not a kid's recreational team.
                </div>
              </li>
              <li>
                <div>
                  <h2>
                    <svg class="fa-star">
                      <use xlink:href="#fa-star"></use>
                    </svg>
                    We have stars
                  </h2>
                  in every position.
                </div>
              </li>
            </ul>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <span class="background" style="background-image:url('https://source.unsplash.com/M-H70CDJnDI/1600x800')"></span>
          <div class="wrap size-60 bg-trans-dark">
            <h4><strong>Why are we so manic on high performance?</strong></h4>
            <p class="text-intro">In procedural work, the best are 2x better than the average.</p>
            <hr>
            <p class="text-intro">In creative work, the best are 10x better than the average, so huge premium on creating effective teams of the best.</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-black">
          <span class="background" style="background-image:url('https://source.unsplash.com/26qZsuRwm0c/1600x800')"></span>
          <div class="wrap aligncenter">
            <h2><strong>Content that people love</strong></h2>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="fullscreen">
          <div class="embed">
            <video autoplay loop poster="https://webslides.tv/static/images/netflix.jpg">
              <source src="https://webslides.tv/static/videos/netflix.mp4" type="video/mp4">
            </video>
          </div>
          <!-- .end .embed -->
        </section>
        <section>
          <div class="wrap size-50">
            <h3><strong>3/7 Freedom & Responsibility</strong></h3>
            <p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p>
            <hr>
            <p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's best interest" (5 words long).</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <h3><strong>"Act in Netflix's best interest"</strong> generally means...</h3>
            <ul class="flexblock border">
            <li>
              Expense only what you would otherwise not spend.
            </li>
            <li>
              Travel as you would if it were your own money.
            </li>
            <li>
              What gifts you can accept?
              Disclose non-trivial vendor gifts.
            </li>
            <li>
              Take from Netflix only when it is inefficient to not take (calls...)
            </li>
            </ul>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap size-50 bg-white">
            <h4><strong>Summary of Freedom & Responsibility</strong></h4>
            <hr>
            <ol>
              <li>As we grow, minimize rules.</li>
              <li>Inhibit chaos with ever more high performance people.</li>
              <li><strong>Flexibility is more important than efficiency</strong> in the long term.</li>
            </ol>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <div class="grid">
              <div class="column">
                <p class="text-context">
                  This is a homage.
                </p>
                <p class="text-intro"><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> wrote <strong>"Netflix Culture: Freedom & Responsibility"</strong>. Go to <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> to read the whole document.</p>
              </div>
              <div class="column">
               <div>
                <div class="embed">
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/uvG0aCbuG60?rel=0&amp;controls=0"  allowfullscreen></iframe>
                </div>
                <!-- normalize flexbox -->
               </div>
               <!-- end .embed -->
              </div>
              <!-- end .column -->
            </div>
            <!-- end .grid -->
          </div>
          <!-- .end .wrap -->
        </section>

      </article>
    </main>
    <!--main-->

    <footer>
      <div class="wrap">
        <p>
          <span class="alignright"><a href="http://netflix.com" title="Netflix"><img src="../static/images/logos/netflix.svg" alt="Netflix"></a></span>
        </p>
      </div>
    </footer>

    <!-- Required -->
    <script src="../static/js/webslides.js"></script>
    <script>
      window.ws = new WebSlides();
    </script> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); -->

    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
    <script defer src="../static/js/svg-icons.js"></script>

  </body>
</html>
